/**
*@description 粉丝地域
*@author yhw
*/
import React, { Component, PropTypes } from 'react';
import { connect } from 'dva';
import { browserHistory } from 'dva/router';
import styles from '../../routes/BusinessData.less';
import ReactEcharts from 'echarts-for-react';
import toExcel from '../../utils/toExcel';
import downImg from '../../utils/downImg';
import {Card, Icon, Tooltip, Row, Col} from 'antd';


const UserPurchase = ({data, dispatch ,loading}) => {
  if(!data.dayId){
    return false
  }
  let state={
      sourceName:['手机号微博匹配数量','微博微信匹配数量','手机号微信匹配数量'],
      seriesName : ['TelWebUidValue','WeChatAndWebUidValue','TelWeChatValue'],
      dayIdList:data.dayId,
      seriesData:[],
      reData:data,
      cname:'近30天跨渠道ID匹配数趋势图'
  }

  let seriesData = [];

  for(var i=0;i<state.seriesName.length;i++){
      seriesData.push({
        name:state.sourceName[i],
        type:'line',
        stack:'',
        data:data[state.seriesName[i]]
      })
    }

  
  let option = {
    tooltip: {
      trigger: 'axis'
    },
    legend: {
        data:state.sourceName,
        textStyle:{
            color:"#fff"
        },
        icon:'stack',
        y:10
    },
    grid: {
      show:false,
      borderWidth: 0,
      top:'30%',
      bottom:'8%'
    },
    xAxis: [{
      type: 'category',
      boundaryGap: false,
      data: state.dayIdList,
      splitLine:{
    　　　　show:false
    　　},
      axisLabel: {
          show: true,
          textStyle: {
              color: '#fff'
          }
      },
      axisLine:{
        lineStyle:{
          color:"#1790cf",
          width:1
        }
      }
    }],
    yAxis: [{
      type: 'value',
      splitLine:{
    　　　　show:false
    　　},
      axisLabel: {
          show: true,
          textStyle: {
              color: '#fff'
          }
      },
      axisLine:{
        lineStyle:{
          color:"#1790cf",
          width:1
        }
      }
    }],
    series: seriesData
  };
  function exExcel(){
    var title = ['日期','用户总数','手机号数量','微信粉丝数量','只在天猫购买数量','天猫&POS购买数量','只在POS购买数量','未产生购买','微信粉丝未注册手机号人数','微信粉丝注册手机号人数'];
        var datas = [],name;
        for(var i=0;i<state.dayIdList.length;i++){
          var arr = [];
          arr.push(state.dayIdList[i]);
          for(var j=0;j<state.seriesName.length;j++){
            name = state.seriesName[j];
            arr.push(data[name][i]);
          }
          datas.push(arr)
        }

        if(datas == '')  
            return;  
        toExcel(title, "近30天跨渠道ID匹配数趋势图", datas);
  }

  return (
    < div className = {styles.box}>
      < h3 >近30天跨渠道ID匹配数趋势图&nbsp;
                    <Tooltip placement="right" title="截止至昨日，最近30天不同ID匹配上的累计人数趋势。">
                      <Icon type="question-circle-o" className={styles.anticon}/>
                    </Tooltip>
      < /h3> 
      < div className = {styles.box_wrap} id="zz_box">
      <div className={styles.downloads}>
        <span className={styles.dimg} onClick={downImg.bind(this,'zz_box','近30天跨渠道ID匹配数趋势图')}></span>
                <span className={styles.desl} onClick={exExcel.bind(this)}></span>
      </div>
      < ReactEcharts option = {option} showLoading={loading}/></div> < /div>
  );
};

UserPurchase.propTypes = {
    // data: PropTypes.array
};

export default connect()(UserPurchase);